import ScreenBlock from '@/components/elements/ScreenBlock';

import { ServerContext } from '@/state/server';

import Spinner from '../elements/Spinner';

export default () => {
    const status = ServerContext.useStoreState((state) => state.server.data?.status || null);
    const isTransferring = ServerContext.useStoreState((state) => state.server.data?.isTransferring || false);
    const isNodeUnderMaintenance = ServerContext.useStoreState(
        (state) => state.server.data?.isNodeUnderMaintenance || false,
    );

    return status === 'installing' || status === 'install_failed' || status === 'reinstall_failed' ? (
        <div className={'flex flex-col items-center justify-center h-full'}>
            <Spinner size={'large'} />
            <div className='flex flex-col mt-4 text-center'>
                <label className='text-neutral-100 text-lg font-bold'>Server is Installing</label>
                <label className='text-neutral-500 text-md font-semibold mt-1'>
                    Your server should be ready soon, for more details visit the home page.
                </label>
            </div>
        </div>
    ) : status === 'suspended' ? (
        <ScreenBlock title={'服务器已暂停'} message={'此服务器已暂停,无法访问。'} />
    ) : isNodeUnderMaintenance ? (
        <ScreenBlock title={'维护节点'} message={'此节点正在维护.'} />
    ) : (
        <ScreenBlock
            title={isTransferring ? '迁移' : '从备份中恢复'}
            message={
                isTransferring
                    ? '您的服务器正在转移到新节点,请稍后再查看。'
                    : '您的服务器当前正在从备份中恢复,请稍后再回来查看。'
            }
        />
    );
};
